import React from 'react';
import {Card, Table} from 'antd';
import axios from "../../axios";

export default class HighTable extends React.Component{

    state={
        dataSource : [],
        loading: true,
    };

    componentDidMount() {
        this.request()
    }

    request = () => {
        axios.Axios({
            url:'table/list',
            method: 'get',
            isShowLoading : 'true',
        }).then(res => {
            this.setState({
                dataSource : res.list,
                loading: false,
            })
        })
    };

    render(){
        const columns = [
            {
                title: 'id',
                key:'id',
                dataIndex: 'id'
            },
            {
                title: '用户名',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                key: 'sex',
                dataIndex: 'sex',
                render: t => t === 1 ? '男' : '女'
            },
            {
                title: '状态',
                key: 'state',
                dataIndex: 'state',
                render: t => {
                    let config ={
                        1 : '游泳',
                        2 : '篮球',
                        3 : '跑步'
                    };
                    return config[t]
                }
            },
            {
                title: '爱好',
                key: 'interest',
                dataIndex: 'interest',
                render: t => {
                    let config ={
                        1 : '游泳',
                        2 : '篮球',
                        3 : '跑步'
                    };
                    return config[t]
                }
            },
            {
                title: '生日',
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                dataIndex: 'address'
            },
            {
                title: '早起时间',
                dataIndex: 'time'
            },
        ];
        return (
            <div className="wrap">
                <Card title="头部固定">
                    <Table
                        dataSource={this.state.dataSource}
                        columns={columns}
                        rowKey={record => record.id}
                        scroll={{y:240}}
                        loading={this.state.loading}
                    />
                </Card>
                <Card title="左右固定" style={{marginTop:20}}>
                    <Table
                        dataSource={this.state.dataSource}
                        columns={columns}
                        rowKey={record => record.id}
                        scroll={{x:240}}
                        loading={this.state.loading}
                    />
                </Card>
            </div>
        )
    }
}